<template>
  <div class="search-rusult-container">
  </div>
</template>
<script>
  export default {
    data() {
      return {
      }
    },
    computed: {

    },
    methods: {
    },
    mounted() {
    }
  }

</script>
<style lang="scss" scoped>
  @import '~assets/common/css/mixin.scss';
  .search-rusult-container {
    height: 100%;
    .my-header {
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      z-index: 1000;
      height: 1.25rem;
      background: #fff;
      padding: $padding;
      @include flexbox(space-between, center, row, nowrap);
      border-bottom: 1px solid #eee;
      .back {
        display: block;
        width: .65rem;
        height: .65rem; //   background: url('~assets/common/images/arrow-left.png') no-repeat;
        background-size: 100%;
      }
      strong {
        font-size: 18px;
        font-weight: normal;
        color: #333;
      }
      .record {
        font-size: 15px;
        color: $red;
      }
      .bheedit {
        font-size: 12px;
      }
    }

    .search-top {
      @include flexbox(space-between,
      center,
      row,
      nowrap);
      padding: 10px 20px;
      background: #fff;
      border-bottom: 1px solid #eee;
      .back-icon {
        width: 23px;
        height: 23px;
        background: url('~assets/common/images/arrow-left.png') no-repeat;
        background-size: 100%;
      }
      .searchInput {
        width: 90%;
        .search-box {
          width: 100%;
          position: relative;
          background: #f4f4f4;
          padding: 5px 10px;
          border-radius: 10px;
          @include flexbox(space-between,
          center,
          row,
          nowrap);
          input {
            width: 100%;
            color: #333;
            font-size: $subtitle;
            outline: none;
            border: none;
            box-shadow: none;
            text-shadow: none;
            font-weight: normal;
            background: transparent;
          }
          .searchIcon {
            display: block;
            height: .38rem;
            margin-right: .05rem;
            width: .4rem;
            background: url('~assets/common/images/searchIcon.png') no-repeat;
            background-size: 600% 100%;
            background-position: -0.34rem 0;
          }
        }
      }
      >span {
        text-align: center;
        font-size: 15px;
        min-width: 1.5rem;
        color: $gray;
      }
    }
    .search-filter {
      // border-top: 1px solid $border;
      border-bottom: 1px solid #eee;
      .search-filter-list {
        background: #fff;
        @include flexbox(space-between,
        center,
        row,
        nowrap);
        .search-filter-item {
          width: 25%;
          @include flexbox(center,
          center,
          row,
          nowrap);
          color: #333;
          font-size: 15px;
          padding: 12px 0;
          &.active {
            color: $red;
          }
          &.more-sort {
            position: relative;
            &:after {
              content: '';
              position: absolute;
              right: .5rem;
              top: 44%;
              width: 0;
              height: 0;
              border: 5px solid transparent;
              border-top-color: $red;
            }
          }
        }
      }
    }
    .content {
      margin-top: 1.25rem;
      padding-bottom: 50px;
      .userinfo {
        @include flexbox(flex-start,
        flex-start,
        row,
        nowrap);
        height: 3rem;
        padding: 30px 15px;
        background: -webkit-linear-gradient(left, #eb3c3c, #ff7459);
        background: linear-gradient(90deg, #eb3c3c, #ff7459); // box-shadow: 0 2px 5px rgba(255, 98, 98, .4);
        position: relative;
        .avatar {
          img {
            border: 1px solid hsla(0, 0%, 100%, .4);
            border-radius: 60px;
            box-shadow: 0 2px 10px rgba(0, 0, 0, .15);
            width: 60px;
            height: 60px;
          }
        }
        .info-box {
          @include flexbox(center,
          flex-start,
          column,
          wrap);
          flex: initial;
          padding: 0 15px;
          color: #fff;
          font-size: 16px;
          .username {
            margin-top: 10px;
          }
        }
      }
      /* 为您推荐 */
      .my-recommend {

        clear: both; // margin-top: 10px;
        .recommend-tip {
          text-align: center;
          margin: 0 0 10px;
          img {
            height: 35px;
          }
        }
        .recommend-list {
          background: #fff;
          padding-right: 10px;
          @include flexbox(space-between,
          center,
          row,
          wrap);
          overflow: hidden;
          clear: both;
          .recommend-item {
            background: #fff;
            padding-left: 10px;
            padding-top: 10px;
            flex: 0 0 50%; //  margin: .15rem;
            .item-posre {
              position: relative;
              text-align: center;
              img {
                max-height: 185px;
                max-width: 100%;
              } // &:after {
              //    display: block;
              //    position: absolute;
              //    content: '';
              //    width: 100%;
              //    height: 23px;
              //    bottom: 0;
              //    background-color: #333333;
              //    opacity: 0.5;
              // }
              // &:before {
              //    display: block;
              //    position: absolute;
              //    content: '失效';
              //    width: 100%;
              //    bottom: 0;
              //    z-index: 100;
              //    color:#ffffff;
              //    line-height: 23px;
              // }
            }
            .item-product-text {
              padding: .1rem 0 0 .1rem;
              font-size: 14px;
              line-height: 20px;
              height: 40px; // overflow: hidden;
              // display: -webkit-box;
              // -webkit-line-clamp: 2;
              // -webkit-box-orient: vertical; 
              // overflow: hidden;
              // text-overflow: ellipsis;
              // display: -webkit-box;
              // -webkit-box-orient:vertical;
              // -webkit-box-orient: vertical;
              // -webkit-line-clamp: 2; 
              @include textoverflow(2);
            }
            .item-product-info {
              @include flexbox(space-between,
              center,
              row,
              wrap);
              color: #f23030;
              padding: 0 0 .2rem .1rem;
              font-size: 16px;
              span {
                i {
                  font-size: 12px;
                  margin-right: .1rem;
                }
              }
              .jx-btn {
                color: #ffffff;
                font-size: 13px;
                background: #f23030;
                border: 1px solid #f23030!important;
                padding: 0.1rem 0.2rem;
                @include radius(3px)
              }
              .none {
                background: #ddd;
                border: 1px solid #999!important;
              }
            }
            .original-price {
              i {
                text-decoration: line-through;
              }
              padding: .2rem .1rem .1rem .1rem;
              font-size: 12px;
              color: #999;
            }
          }
        }
      }
      /* 为您推荐 */
    }
  }

</style>
